<template>
  <div class="l-from-body" > 
    <el-form :model="formData" size="mini" :rules="rules"  ref="form" label-width="88px"  >
      <el-form-item label="草稿名称" prop="f_Name">
        <el-autocomplete
          v-model="formData.f_Name"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入"
        ></el-autocomplete>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
const apiScheme = window.$api.codetool.scheme

export default {
  data(){
    return {
      formData:{
        f_Name:''
      },
      rules: {
        f_Name: [
            { required: true, message: '请输入草稿名称' }
        ]
      },
      draftsData:null
    }
  },
  methods:{
    resetForm(){
      this.$formClear(this.$refs.form)
    },
    validate(){
      return this.$refs.form.validate()
    },
    async save(content){
      var postData = {
        f_Name:this.formData.f_Name
      }
      postData.f_Content = content
      postData.f_Type = 2
      postData.f_ProjectId = this.project.f_Id

      var row = this.draftsData.find(t=>t.f_Name == postData.f_Name)
      if(row){
        await apiScheme.update(row.f_Id,postData)
      }
      else{
        this.draftsData.push(postData)
        await apiScheme.add(postData)
      }
    },
    async querySearchAsync(queryString, cb){
      if(this.draftsData == null){
        await this.loadData()
      }
      var res = queryString ? this.draftsData.filter(t=>t.f_Name.indexOf(queryString) != -1) : this.draftsData
      cb(res.map(t=>{return {...t,value:t.f_Name}}))
    },
    async loadData(){
      const data = await this.$awaitWraper(apiScheme.getDrafts({f_ProjectId:this.project.f_Id}))
      this.draftsData = data || []
    }
  }
}
</script>
